{% extends "templates/web.html" %}

{% block page_content %}
    <div class="container">
        <h1>Shopify 集成设置</h1>
        <form class="form" method="POST" action="/api/method/frappe.desk.form.save.single">
            <input type="hidden" name="doctype" value="Shopify Settings">

            <div class="form-group">
                <label for="api_key">API Key</label>
                <input type="text" id="api_key" name="api_key" class="form-control"
                    value="{{ doc.api_key or '' }}" required>
            </div>

            <div class="form-group">
                <label for="api_secret">API Secret</label>
                <input type="password" id="api_secret" name="api_secret" class="form-control"
                    value="{{ doc.api_secret or '' }}" required>
            </div>

            <div class="form-group">
                <label for="redirect_uri">回调URL</label>
                <input type="text" id="redirect_uri" name="redirect_uri" class="form-control"
                    value="{{ doc.redirect_uri or '' }}" required>
                <small class="text-muted">
                    示例: {{ frappe.utils.get_url() }}/api/method/upsystem.api.handle_shopify_callback
                </small>
            </div>

            <div class="form-group">
                <label for="api_version">API版本</label>
                <input type="text" id="api_version" name="api_version" class="form-control"
                    value="{{ doc.api_version or '2023-10' }}">
            </div>

            <h3 class="mt-4">默认映射设置</h3>

            <div class="form-group">
                <label for="default_item_group">默认物料组</label>
                {{ frappe.ui.form.make_control({
                    'df': {
                        'fieldtype': 'Link',
                        'options': 'Item Group',
                        'fieldname': 'default_item_group'
                    },
                    'value': doc.default_item_group,
                    'parent': me.frm
                }) }}
            </div>

            <h3 class="mt-4">同步配置</h3>

            <div class="form-group">
                <label for="max_concurrent_shops">最大并发店铺数</label>
                <input type="number" id="max_concurrent_shops" name="max_concurrent_shops"
                    class="form-control" value="{{ doc.max_concurrent_shops or 5 }}" min="1" max="20">
            </div>

            <div class="form-group">
                <label for="auto_sync">启用自动同步</label>
                <input type="checkbox" id="auto_sync" name="auto_sync"
                    {{ 'checked' if doc.auto_sync else '' }}>
            </div>

            <div class="form-group" id="sync_interval_field"
                style="{{ 'display: none' if not doc.auto_sync else '' }}">
                <label for="sync_interval">同步间隔（小时）</label>
                <input type="number" id="sync_interval" name="sync_interval"
                    class="form-control" value="{{ doc.sync_interval or 24 }}" min="1">
            </div>

            <button type="submit" class="btn btn-primary mt-4">保存设置</button>
        </form>
    </div>

    <script>
        // 自动同步选项切换显示
        document.getElementById('auto_sync').addEventListener('change', function() {
            const intervalField = document.getElementById('sync_interval_field');
            intervalField.style.display = this.checked ? 'block' : 'none';
        });
    </script>
{% endblock %}
